<template>
  <div>
    <van-nav-bar
      :title="$route.name"
      @click-left="$router.back()"
      left-text="返回"
      left-arrow
    />
    <!-- 侧边栏导航 -->
    <div class="cateInfo">
      <van-sidebar @change='changeBar' v-model="activeKey">
        <van-sidebar-item v-for="item in catelist" :key='item.id' :title="item.catename" />
      </van-sidebar>
      <van-grid :border="false" :column-num="3">
        <van-grid-item :to="'/list?id='+item.id" v-for="item in secondCate" :key='item.id'>
          <van-image :src="item.img" />
          <p>{{item.catename}}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script>
import {getCate} from '../request/api'
export default {
  data() {
    return {
      activeKey: 0,
      catelist:[],
      secondCate:[]
    };
  },
  mounted() {
      //调取分类接口
      getCate()
      .then(res=>{
          console.log(res,'分类列表');
          if(res.code==200){
              this.catelist = res.list
              this.secondCate = res.list[0].children
          }
      })
  },
  methods: {
      //封装一个切换事件
      changeBar(){
          //重新给二级分类赋值
          this.secondCate = this.catelist[this.activeKey].children
      }
  },
};
</script>

<style scoped>
.cateInfo{
    display: flex;
}
.van-grid{
    flex:1
}
</style>
